<template>
    <a-modal v-model:visible="visable" :mask-closable="false" title="广告位置管理" :width="700" @cancel="close"
        @close="$emit('close')">
        <a-row type="flex" justify="space-between" style="padding-bottom: 20px">
            <a-col :span="8" v-has="'advertising:position:save'">
                <a-button type="primary" @click="showAdd">添加位置</a-button>
            </a-col>
        </a-row>
        <a-row>
            <a-col :span="24">
                <a-table row-key="id" :data="data" :bordered="false" :pagination="false" :columns="keys" :loading="loading">
                    <!--操作-->
                    <template #action="{ record }" v-has-or="'admin:save|admin:del'">
                        <a-button-group shape="circle" size="small">
                            <a-tooltip content="修改">
                                <a-button shape="circle" type="text" v-has="'advertising:position:save'"
                                    @click="showAdd(record)">
                                    <icon-edit />
                                </a-button>
                            </a-tooltip>
                            <a-tooltip content="删除">
                                <a-button shape="circle" type="text" status="danger" v-has="'advertising:position:del'"
                                    @click="del(record.id)">
                                    <icon-delete />
                                </a-button>
                            </a-tooltip>
                        </a-button-group>
                    </template>
                </a-table>
            </a-col>
        </a-row>
    </a-modal>
    <position-form-vue ref="ptForm" @success="getList"></position-form-vue>
</template>

<script lang="ts">
import { onBeforeMount, ref } from 'vue';
import { computed, onMounted, watch } from "vue";
import utils from '@/utils/utils';
import request from '@/config/request';
import positionFormVue from "./positionForm.vue";
export default {
    components: { positionFormVue },
    setup(props, { emit }) {
        const visable = ref(false);
        const result = ref(1);
        const loading = ref(true);
        const data = ref([]);

        const keys = computed<any>(() => [
            { title: "位置名称", dataIndex: "name", minWidth: 160, resizable: true },
            { title: "读取数量", dataIndex: "num", width: 120, align: 'center', resizable: true },
            { title: "图片宽度", dataIndex: "width", width: 120, align: 'center', resizable: true },
            { title: "图片高度", dataIndex: "height", width: 120, align: 'center', resizable: true },
            { title: "操作", slotName: 'action', align: "center", width: 100 }
        ])
        const show = () => {
            visable.value = true;
            getList();
        };
        const close = () => {
            visable.value = false;
        };
        const ptForm = ref();
        const showAdd = (row: any) => {
            console.log(row);
            ptForm.value.show(row ? row : null);
        };
        const getList = () => {
            loading.value = true;
            request.get('/platform/advertising/position', null).then(ret => {
                data.value = ret.data;
                loading.value = false;
            })
        };
        const del = (id: any) => {
            utils.confirm('删除后无法恢复，是否确认?').then(() => {
                loading.value = true;
                request.delete("/platform/advertising/position/del/" + id, null).then((ret: any) => {
                    loading.value = false;
                    if (ret.code == 200) {
                        utils.success('操作成功！').then(() => {
                            getList();
                        });
                    }
                }).catch(err => {
                    loading.value = false;
                })
            })
        }
        return { visable, location, data, keys, loading, ptForm, show, close, showAdd, del, getList };
    }
}
</script>
